<template>
  <div class="resizable-panel" :style="panelStyle">
    <div class="panel-header" @mousedown="startDrag" :style="{ backgroundColor: props.headerColor }">
      <span class="title">{{ title }}</span>
      <div class="header-buttons">
        <button @click="toggleMinimize">
          <el-icon>

            <svg v-if="isMinimized" t="1748868731319" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="2713" width="200" height="200">
              <path
                d="M307.2 0H153.6C68.7744 0 0 68.7744 0 153.6v153.6a51.2 51.2 0 1 0 102.4 0V153.6a51.2 51.2 0 0 1 51.2-51.2h153.6a51.2 51.2 0 1 0 0-102.4z m716.8 307.2V153.6c0-84.8256-68.7744-153.6-153.6-153.6H716.8a51.2 51.2 0 1 0 0 102.4h153.6a51.2 51.2 0 0 1 51.2 51.2v153.6a51.2 51.2 0 1 0 102.4 0zM716.8 1024h153.6c84.8256 0 153.6-68.7744 153.6-153.6V716.8a51.2 51.2 0 1 0-102.4 0v153.6a51.2 51.2 0 0 1-51.2 51.2H716.8a51.2 51.2 0 1 0 0 102.4zM0 716.8v153.6c0 84.8256 68.7744 153.6 153.6 153.6h153.6a51.2 51.2 0 1 0 0-102.4H153.6a51.2 51.2 0 0 1-51.2-51.2V716.8a51.2 51.2 0 1 0-102.4 0z"
                fill="#ffffff" p-id="2714"></path>
            </svg>
            <svg v-else t="1748868699470" class="icon" viewBox="0 0 1088 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1700" width="200" height="200">
              <path
                d="M1094.54222222 462.28973037h-1087.41214814a11.10713837 11.10713837 0 0 0-11.10713838 11.02946608v77.6722963c0 6.13611141 5.04869925 11.10713837 11.10713838 11.10713836h1087.41214814a11.10713837 11.10713837 0 0 0 11.10713837-11.10713836v-77.6722963a11.10713837 11.10713837 0 0 0-11.10713837-11.10713837z"
                p-id="1701" fill="#ffffff"></path>
            </svg>
          </el-icon>
        </button>
        <button class="close-btn" @click="emitSetup">
          <svg style="width: 35px;height: 35px;" t="1748868923048" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="4381" id="mx_n_1748868923050" width="200" height="200">
            <path
              d="M553.7 753.4h-59.9c-12.8 0-23.3-10.4-23.3-23.3v-52c-10.8-3.4-21.2-7.7-31.2-13l-32.1 32.1c-5.5 5.5-13.2 8.6-21.2 8.6s-15.7-3.2-21.2-8.7l-37.6-37.6c-5.7-5.7-8.8-13.2-8.8-21.2s3.1-15.5 8.8-21.2l32.1-32.1c-5.2-10-9.6-20.4-12.9-31.2H301c-16.5 0-29.9-13.4-29.9-29.9v-53.2c0-16.5 13.4-29.9 29.9-29.9h45.3c3.4-10.8 7.7-21.2 12.9-31.2l-32.1-32.1c-5.7-5.7-8.8-13.2-8.8-21.2s3.1-15.5 8.8-21.2l37.7-37.7c5.5-5.5 13.2-8.6 21.2-8.6s15.7 3.2 21.2 8.7l32 32c10-5.3 20.5-9.6 31.2-13v-52c0-12.8 10.4-23.3 23.3-23.3h59.9c16.5 0 29.9 13.4 29.9 29.9v45.3c10.8 3.4 21.2 7.7 31.2 13l32.1-32.1c5.5-5.5 13.2-8.6 21.2-8.6s15.7 3.2 21.2 8.7l37.6 37.6c5.7 5.7 8.8 13.2 8.8 21.2s-3.1 15.5-8.8 21.2l-32.1 32.1c5.2 10 9.6 20.4 12.9 31.2h45.3c16.5 0 29.9 13.4 29.9 29.9V524c0 16.5-13.4 29.9-29.9 29.9h-45.3c-3.4 10.8-7.7 21.2-12.9 31.2l32.1 32.1c5.7 5.7 8.8 13.2 8.8 21.2s-3.1 15.5-8.8 21.2l-37.7 37.7c-5.5 5.5-13.2 8.6-21.2 8.6s-15.7-3.2-21.2-8.7l-32-32c-10 5.3-20.5 9.6-31.2 13v45.3c0.1 16.5-13.3 29.9-29.8 29.9z m-54-29.2h54l0.8-68.6 11.1-2.7c15.6-3.8 30.5-10 44.2-18.3l9.8-5.9 48 48 38.8-37.6-48-49.1 5.9-9.8c8.3-13.7 14.5-28.6 18.3-44.2l2.7-11.1h67.8l0.8-0.8v-53.2l-68.6-0.8-2.7-11.1c-3.9-15.6-10-30.5-18.3-44.2l-5.9-9.8 48-48-37.6-38.8-49.1 48-9.8-5.9c-13.8-8.3-28.7-14.5-44.2-18.3l-11.1-2.7v-67.8l-54.8-0.7v68.5l-11.1 2.7c-15.6 3.8-30.5 10-44.2 18.3l-9.8 5.9-48-48-38.8 37.6 48 49.1-5.9 9.8c-8.3 13.7-14.5 28.6-18.3 44.2L369 470h-68l-0.8 54 68.6 0.8 2.7 11.1c3.9 15.6 10 30.5 18.3 44.2l5.9 9.8-48 48 37.6 38.8 49.1-48 9.8 5.9c13.8 8.3 28.7 14.5 44.2 18.3l11.1 2.7v68.6z"
              p-id="4382" fill="#ffffff"></path>
            <path
              d="M527.1 599.5c-56.3 0-102.1-45.8-102.1-102.1s45.8-102.1 102.1-102.1 102.1 45.8 102.1 102.1-45.9 102.1-102.1 102.1z m0-175c-40.2 0-72.9 32.7-72.9 72.9s32.7 72.9 72.9 72.9 72.9-32.7 72.9-72.9-32.7-72.9-72.9-72.9z"
              p-id="4383" fill="#ffffff"></path>
          </svg>
        </button>
        <button class="close-btn" @click="emitClose">
          <svg style="width: 20px;height: 20px;" t="1748868964714" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="5315" width="200" height="200">
            <path
              d="M566.97558594 521.09667969L856.8828125 231.18945312c14.63378906-14.63378906 14.63378906-38.75976563 0-53.39355468l-1.58203125-1.58203125c-14.63378906-14.63378906-38.75976563-14.63378906-53.39355469 0L512 466.51660156 222.09277344 176.21386719c-14.63378906-14.63378906-38.75976563-14.63378906-53.39355469 0l-1.58203125 1.58203125c-15.02929688 14.63378906-15.02929688 38.75976563 0 53.39355469l289.90722656 289.90722656L167.1171875 811.00390625c-14.63378906 14.63378906-14.63378906 38.75976563 0 53.39355469l1.58203125 1.58203125c14.63378906 14.63378906 38.75976563 14.63378906 53.39355469 0L512 576.07226563 801.90722656 865.97949219c14.63378906 14.63378906 38.75976563 14.63378906 53.39355469 0l1.58203125-1.58203125c14.63378906-14.63378906 14.63378906-38.75976563 0-53.39355469L566.97558594 521.09667969z"
              fill="#ffffff" p-id="5316"></path>
          </svg>
        </button>
      </div>
    </div>

    <transition name="slide">
      <div class="panel-content" v-show="!isMinimized">
        <slot></slot>
      </div>
    </transition>


  </div>
</template>

<script setup lang="ts">
interface Position {
  x: number
  y: number
}

interface Props {
  width?: number
  height?: number
  title?: string
  headerColor?: string
  position?: Position
  isMinimized?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  width: 300,
  height: 400,
  title: 'Panel',
  headerColor: '#3a7bd5',
  position: () => ({ x: 100, y: 100 }),
  isMinimized: false
})

// 定义更新事件
const emit = defineEmits<{
  close: []
  'update:width': [width: number]
  'update:height': [height: number]
  setup: []
  'update:position': [position: Position]
  'update:isMinimized': [isMinimized: boolean]
}>()


const isMinimized = ref(props.isMinimized) // 使用 modelValue
const isDragging = ref(false)
const startPos = ref<Position>({ x: 0, y: 0 })
const isResizing = ref(false)
const resizeDirection = ref('')
const startSize = ref({ width: props.width, height: props.height })


// 直接初始化并检查
const position = ref<Position>({
  x: Math.max(0, props.position.x),
  y: Math.max(0, props.position.y)
})

// 如果初始值被修正，则通知父组件
if (position.value.x !== props.position.x || position.value.y !== props.position.y) {
  emit('update:position', position.value)
}

// 监听 props.modelValue 的变化
watch(() => props.position, (newVal) => {
  position.value = newVal
}, { flush: 'post' })


const panelStyle = computed(() => ({
  width: isMinimized.value ? '300px' : `${props.width}px`,
  height: isMinimized.value ? '50px' : `${props.height}px`,
  transform: `translate(${position.value.x}px, ${position.value.y}px)`,
  zIndex: 1000,
}))

const startDrag = (e: MouseEvent) => {
  e.preventDefault()
  isDragging.value = true
  startPos.value = {
    x: e.clientX - position.value.x,
    y: e.clientY - position.value.y,
  }
}

const onDrag = (e: MouseEvent) => {
  if (!isDragging.value) return
  requestAnimationFrame(() => {
    const newPosition = {
      x: e.clientX - startPos.value.x,
      y: e.clientY - startPos.value.y,
    }
    position.value = newPosition
    // 触发更新，同步到父组件
    emit('update:position', newPosition)
  })
}

const stopDrag = () => {
  isDragging.value = false
}


const onResize = (e: MouseEvent) => {
  if (!isResizing.value) return

  const deltaX = e.clientX - startPos.value.x
  const deltaY = e.clientY - startPos.value.y

  switch (resizeDirection.value) {
    case 'top':
      emit('update:height', Math.max(100, startSize.value.height - deltaY))
      position.value.y += deltaY
      break
    case 'right':
      emit('update:width', Math.max(200, startSize.value.width + deltaX))
      break
    case 'bottom':
      emit('update:height', Math.max(100, startSize.value.height + deltaY))
      break
    case 'left':
      emit('update:width', Math.max(200, startSize.value.width - deltaX))
      position.value.x += deltaX
      break
  }

  startPos.value = { x: e.clientX, y: e.clientY }
}

const stopResize = () => {
  isResizing.value = false
}
onMounted(() => {
  const handleMouseMove = (e: MouseEvent) => {
    if (isDragging.value) onDrag(e)
    if (isResizing.value) onResize(e)
  }
  const handleMouseUp = () => {
    if (isDragging.value) stopDrag()
    if (isResizing.value) stopResize()
  }
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)

  onUnmounted(() => {
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  })
})
const toggleMinimize = () => {
  isMinimized.value = !isMinimized.value
  emit('update:isMinimized', isMinimized.value)
}

const emitClose = () => {
  console.log(1231)

  emit('close')
}

const emitSetup = () => {
  emit('setup')
}
</script>

<style scoped>
.resizable-panel {
  width: 1000px;
  height: 1000px;
  left: 0;
  top: 0;
  z-index: 9999;

  position: fixed;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height 0.3s ease, width 0.3s ease;
  /* 移除不必要的硬件加速，让浏览器决定 */
  contain: layout style;
  /* 性能优化：限制重绘范围 */
}

.panel-header {
  box-sizing: border-box;
  height: 50px;
  background: #3a7bd5;
  color: white;
  padding: 8px 12px;
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  font-weight: 500;
  flex-shrink: 0;
  /* 防止header被压缩 */
}

.panel-header .title {
  text-align: center;
}


.panel-content {
  box-sizing: border-box;
  flex: 1;
  padding: 12px;
  overflow: auto;
  min-height: 0;
  /* 允许内容收缩 */
}

.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 10;
}

.resize-handle.top {
  top: 0;
  height: 4px;
  cursor: ns-resize;
  width: 100%;
}

.resize-handle.right {
  right: 0;
  width: 4px;
  cursor: ew-resize;
  height: 100%;
}

.resize-handle.bottom {
  bottom: 0;
  height: 4px;
  cursor: ns-resize;
  width: 100%;
}

.resize-handle.left {
  left: 0;
  width: 4px;
  cursor: ew-resize;
  height: 100%;
}

.header-buttons {
  height: 100%;
  width: 400px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header-buttons button {
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  margin-left: 8px;
  padding: 0 4px;
  box-sizing: border-box;
}

.header-buttons button:hover {
  background: rgba(255, 255, 255, 0.2);
}



.slide-enter-active,
.slide-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
  max-height: 0;
  padding: 0;
}
</style>
